<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center">
      <el-row class="JNPF-common-search-box" :gutter="16">
        <el-form @submit.native.prevent label-width="80px" label-position="left">
          <el-col :span="6">
            <el-form-item label="类别">
              <el-select clearable filterable v-model="listQuery.ftype" class="filter-item" placeholder="请选择类别">
                  <el-option
                  v-for="item in getFparentnoFtypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
        <el-button
        type="primary"
          @click="handleFilter"
          >查找</el-button
        >
      </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="JNPF-common-layout-main JNPF-flex-main">
       <!-- 查询结果 -->
    <JNPF-table
      v-loading="listLoading"
      :data="list"
    >
      <el-table-column
        :width="buttonColor.line"
        :index="indexMethod"
        align="center"
        label="序"
        type="index"
      />
      <el-table-column width="180" align="left" label="物料编号" prop="fgoodno" />
      <el-table-column width="180" align="left" label="物料名称" prop="fgoodname" />
      <el-table-column width="180" align="left" label="物料库存" prop="fqty" />
      <el-table-column align="left" label="物料规格" prop="fspec" />
    </JNPF-table>
    <paginations
	:total="total"
	:page.sync="listQuery.currentPage"
	:limit.sync="listQuery.pageSize"
	/>
      </div>
    </div>
  </div>
</template>
<script>
import { listMaterial } from "@/api/tsCabinet";
import { tableColor,titleColor,buttonColor } from "@/filters/index";
export default {
  name: "InventoryList",
  data() {
    return {
      buttonColor:buttonColor,
      getFparentnoFtypeList:[
        {label: '前十',value: 1},
        {label: '后十',value: 2},
      ],
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        fsiteNo: this.$store.state.user.fsiteNo,
        ftype: undefined,
        sort: "create_time",
        order: "desc",
      },
      tableColor: tableColor,
      titleColor: titleColor,
    };
  },
  created() {
    this.listQuery.ftype = 1
    this.getList();
  },
  methods: {
    // 获取列表数据
    getList() {
      this.listLoading = true;
      listMaterial(this.listQuery)
        .then((response) => {
          this.list = response.data.data.list;
          this.total = response.data.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });
    },
    // 查找
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },

    // 序号
    indexMethod(index) {
      index = index + 1;
      return index;
    },
  },
};
</script>
